<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增菜单')" />

</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">

        <form class="form-horizontal m"  id="form-data"   >

            <div class="form-group">
                <label  class="col-sm-3 control-label">上级菜单：</label>
                <div class="col-sm-8">
                    <input type="hidden" id="menuType" name="menuType"  th:value="${menuType}">
                    <input type="hidden" id="parentId" name="parentId"  th:value="${parentId}">
                    <b th:text="${parentName}"></b>
                </div>
            </div>

            <div class="form-group">
                <label  class="col-sm-3 control-label is-required" th:text="${menuName}"></label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="name" required>
                </div>
            </div>

            <div class="form-group" th:if="${menuType=='C'}">
                <label  class="col-sm-3 control-label " >请求地址：</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="url">
                </div>
            </div>

            <div class="form-group" th:if="${menuType=='C'}">
                <label  class="col-sm-3 control-label " >打开方式：</label>
                <div class="col-sm-8">
                    <select id="target" name="target" class="form-control m-b">
                        <option value="menuItem">页签</option>
                        <option value="menuBlank">新窗口</option>
                    </select>
                </div>
            </div>

            <div class="form-group" th:if="${menuType!='M'}">
                <label  class="col-sm-3 control-label is-required "  >权限标识：</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="perms" required>

                    <span class="help-block m-b-none">
                        <i class="fa fa-info-circle"></i>
                        控制器中定义的权限标识，如：@RequiresPermissions("")
                    </span>
                </div>
            </div>

            <div class="form-group">
                <label  class="col-sm-3 control-label is_required" >显示排序：</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="orderNum" required>
                </div>
            </div>

            <div class="form-group" th:if="${menuType!='F'}">
                <label class="col-sm-3 control-label">图标：</label>
                <div class="col-sm-8">
                    <input id="icon" name="icon" class="form-control" type="text" placeholder="选择图标">
                    <div class="ms-parent" style="width: 100%;">
                        <div class="icon-drop animated flipInX" style="display: none;max-height:200px;overflow-y:auto">
                            <div data-th-include="system/menu/icon"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group" th:if="${menuType!='F'}">
                <!-- 左边菜单状态 -->
                <label class="col-sm-3 control-label">菜单状态：</label>
                <div class="col-sm-3">
                    <div class="radio-box" th:each="dict : ${@dict.getType('sys_show_hide')}">

                        <input type="radio" th:id="${dict.dictCode}" name="visible"
                               th:value="${dict.dictValue}" th:checked="${(dict.isDefault=='Y')? true : false}">

                        <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>

                <!-- 右边是否刷新 -->
                <label th:if="${menuType=='C'}" class="col-sm-2 control-label is-refresh" title="打开菜单选项卡是否刷新页面">是否刷新：<i class="fa fa-question-circle-o"></i></label>
                <div class="col-sm-3 is-refresh" th:if="${menuType=='C'}">
                    <div class="radio-box">
                        <input type="radio" id="refresh-no" name="isRefresh" value="1" checked>
                        <label for="refresh-no">否</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" id="refresh-yes" name="isRefresh" value="0">
                        <label for="refresh-yes">是</label>
                    </div>
                </div>
            </div>


        </form>



    </div>


</body>

<th:block th:include="include :: footer" />

<script type="text/javascript">
    /**
     * 点击了模态框的提交按钮以后触发的事件（名称必须叫 submitHandler）
     */
    function submitHandler() {
        if ($.validate.form()) {
            add();
        }
    }



    /**
     * 向后台java发送ajax提交请求
     */
    function add(){
        //手工收集
        // var formData={};
        // formData.name=$("#form-add input[name='name']").val();
        // formData.status=$("#form-add select[name='status']").val();

        //另一种写法，jquery帮你封装表单序列化方法 (全自动收集)  $.serialize("#form-add")
        var formDataString= $("#form-data").serialize();

        $.ajax({
            type:"post",
            url:ctx+"admin/menu/add",
            data: formDataString,
            dataType:"json",
            //同步
            async: false,
            success:function(resp){
                //调用别人帮你封装好的方法
                $.operate.successCallback(resp);
            },error:function(e){
                console.log(e);
                $.modal.alertError("系统错误");
            }
        });

    }

    $(function(){

            //图标选中图标文本框做的事件
            $("input[name='icon']").focus(function() {
                $(".icon-drop").show();
            });

            //点击表单任意位置，要把 icon图标div样式隐藏掉
            $("#form-data").click(function(event) {
                var obj = event.srcElement || event.target;
                //如果当前点击对象不是 "icon"，就要把它隐藏
                if (!$(obj).is("input[name='icon']")) {
                    $(".icon-drop").hide();
                }
            });

             //找到图标每一个i标签，注册点击事件
            $(".icon-drop").find(".ico-list i").on("click", function() {
                //把<i class="fa fa-address-book"></i>
                $('#icon').val($(this).attr('class'));
            });




    });

</script>

</html>